<template>
  <div class="category-container">
    <el-menu
      mode="vertical"
      @select="handleCategorySelect"
    >
      <el-menu-item
        v-for="category in categories"
        :key="category.category_id"
        :index="category.category_id.toString()"
      >
        {{ category.category_name }}
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const categories = ref<Array<{category_id: number, category_name: string}>>([])

onMounted(async () => {
  try {
    const response = await axios.get(`${import.meta.env.VITE_API_BASE}/product/category`)
    categories.value = response.data
  } catch (error) {
    console.error('获取分类数据失败:', error)
  }
})

const handleCategorySelect = (categoryId: string) => {
  router.push({ name: 'home', query: { category_id: categoryId } })
}
</script>

<style scoped>
.category-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}
</style>